<!DOCTYPE html>
<html lang="en" class="app">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>${articleName?default("")} - 毕设新闻</title>

    <script src="/assets/vendors/pace/pace.min.js"></script>
    <link href="/assets/vendors/pace/themes/pace-theme-minimal.css" rel="stylesheet"/>

    <link rel='stylesheet' media='all' href='/assets/vendors/font-awesome/css/font-awesome.min.css'/>
    <link rel="stylesheet" media='all' href="/assets/vendors/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" media='all' href="/assets/vendors/animate/animate.min.css">
    <link rel='stylesheet' media='all' href='/assets/css/style.css'/>
    <link rel='stylesheet' media='all' href='/assets/css/layout.css'/>
    <link rel='stylesheet' media='all' href='/assets/css/plugins.css'/>
    <link rel='stylesheet' media='all' href='/assets/css/addons.css'/>
    <link rel='stylesheet' media='all' href='/css/jquery.pagination.css'/>

    <link rel='stylesheet' media='all' href="/assets/vendors/baguette/baguetteBox.min.css"/>

    <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/utils.js"></script>

    <script type="text/javascript" src="/assets/vendors/layer/layer.js"></script>

    <script type="text/javascript" src="/assets/js/sea.js"></script>
    <script type="text/javascript" src="/assets/js/sea.config.js"></script>
    <script type="text/javascript" src="/js/jquery.pagination.js"></script>
    <script type="text/javascript" src="/js/date.format.js"></script>

    <!-- Favicons -->
    <link rel="apple-touch-icon-precomposed" href="http://mtons.com/dist/images/logo.png"/>
    <link rel="shortcut icon" href="http://mtons.com/dist/images/logo.png"/>

    <script type="text/javascript">
        var _base_path = '$!{base}';

        window.app = {
            base: '',
            LOGIN_TOKEN: '$!{profile.id}'
        };

        window.UEDITOR_HOME_URL = '/assets/vendors/ueditor/';
    </script>
</head>
<body>

<!-- Header BEGIN -->
<#include "/inc/header.ftl">
<!--.site-main -->
<div class="wrap" id="wrap">
    <div class="container">
        <div class="row">
            <div class="main clearfix">
                <!-- left -->
                <div class="col-xs-12 col-md-9 side-left">

                    <div class="shadow-box">
                        <!-- tab -->
                        <#function f2 ord>
                            <#if (RequestParameters.ord?default("")==ord)>
                                <#return 'class="active"'>
                            <#else>
                                <#return ''>
                            </#if>
                        </#function>
                        <div class="filter">
                            <ul class="">
                                <li><a ${f2("newest")} href="?ord=newest"><i class="fa fa-newspaper-o"></i>最新的</a></li>
                                <li><a ${f2("hottest")} href="?ord=hottest"><i class="fa fa-fire"></i>热门的</a></li>
                                <!--
                                <li><a href="/blogs/hottest">全部的</a></li>
                                -->
                            </ul>
                        </div>
                        <!-- tab end -->
                        <!-- tab panes -->
                        <#list articles as item>
                            <div class="stream-list p-stream">
                                <div class="stream-item" id="loop-10">
                                    <div class="summary">
                                        <a href="/view/${item.id}.html">
                                            <div class="title"><h2>${item.title}</h2></div>
                                            <!--<div class="excerpt wordbreak hidden-xs">$!{row.summary} </div>-->
                                        </a>
                                        <!--前端图片显示样式-->

                                    </div>
                                    <div class="p-rank clearfix">
                                        <div class="users">
                                            <a href="/ta/1">
                                                <div class="ava">
                                                    <img class="img-circle" src="${item.user.avatar}"/>
                                                </div>
                                            </a>
                                            <div class="info">
                                                <strong> ${item.user.nickname}</strong>
                                                <time>${item.createTime?datetime("yyyy-MM-dd HH:mm:ss")}</time>
                                            </div>

                                        </div>
                                        <div class="counts">
                                            <span class="act"><i class="praise_icon"></i>${item.likes?default(0)}</span>
                                            <span class="act"><i class="comment_icon"></i>${item.comments?default(0)}</span>
                                        </div>
                                        <div class="foot-block clearfix">
                                            <ul class="tags">
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </#list>
                    </div>
                    <#--分页显示模块-->
                    <ul class="m-style M-box3" id="pagebox">
                    </ul>
                </div>
                <!-- right sidebar-->
                <div class="col-xs-12 col-md-3 side-right hidden-xs hidden-sm">
                    <div class="widget-box shadow-box">
                        <div class="title">
                            <h3><i class="fa fa-users "></i> 热门用户</h3>
                        </div>
                        <ul id="hotuser" class="hotusers">

                            <img src="/assets/images/spinner.gif">

                        </ul>
                    </div>

                    <div class="widget-box shadow-box">
                        <div class="title">
                            <h3>
                                <i class="fa fa-area-chart"></i> 热门文章
                                <a href="" class="rrh-refresh"><i class="fa fa-refresh"></i>换一批</a>
                            </h3>

                        </div>
                        <ul class="box-list" id="hots">
                            <li class="text-center"><img src="/assets/images/spinner.gif"></li>
                        </ul>
                    </div>

                    <div class="widget-box shadow-box">
                        <div class="title">
                            <h3><i class="fa fa-bars"></i> 最新发布
                                <a href="" class="rrh-refresh">查看更多</a></h3>
                        </div>
                        <ul class="box-list" id="latests">
                            <li class="text-center"><img src="/assets/images/spinner.gif"></li>
                        </ul>
                    </div>
                </div>


                <script type="text/javascript">
                    var hot_li_template = '<li><div class="li-out"><span class="last"><i>{0}</i></span><span class="name"><a  href="{1}">{2}</a></span><span class="nums">{3}</span></div></li>'
                    var latest_li_template = '<li><div class="li-out"><span class="name"><a  href="{1}">{2}</a></span><span class="nums">{3}</span></div></li>'

                    var hotUser_li_template = '<li class=""><a  href="{1}"><img src="{0}" class="imguser"/></a></li>'

                    seajs.use('sidebox', function (sidebox) {
                        sidebox.init({
                            latestUrl: '/api/latests.json',
                            hotUrl: '/api/hots.json',
                            hotTagUrl: '/api/hot_tags.json',
                            hotUserUrl: '/api/hotusers.json',

                            maxResults: 6,
                            // callback
                            onLoadHot: function (i, data) {
                                var url = '/view/' + data.id + '.html';
                                var item = jQuery.format(hot_li_template, i + 1, url, data.title, numberScale(data.hits));
                                return item;
                            },
                            onLoadLatest: function (i, data) {
                                var url = '/view/' + data.id + '.html';
                                var item = jQuery.format(latest_li_template, i + 1, url, data.title, numberScale(data.hits));
                                return item;
                            },
                            onLoadHotUser: function (i, data) {
                                var url = '/other/' + data.id;
                                var item = jQuery.format(hotUser_li_template, data.avatar, url, data.name, data.fans);
                                return item;
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>
</div>

<#include "/inc/footer.ftl">

<a href="#" class="site-scroll-top"></a>

<script type="text/javascript">
    seajs.use('main', function (main) {
        main.init();
    });
    $(function () {
        $("#pagebox").pagination({
            current:${pageBean.currentPage?c?default(1)},
            pageCount: ${pageBean.totalPage?c?default(0)},
            jump: true,
            callback: function (api) {
                window.location.href = '?page=' + api.getCurrent() + '&ord=${RequestParameters.ord?default("newest")}';
            }
        });
    });
</script>
</body>
</html>
